<template>
  <!-- 支付结果 -->
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="payment_successful">
      <div class="success">
        <img class="img1"
          src="https://cdn7.axureshop.com/demo/1763441/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u817.png" alt="" />
        <img class="img2"
          src="https://cdn7.axureshop.com/demo/1763441/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u818.png" alt="" />
      </div>
      <div class="registration_information">
        <p class="tu">
          <img src="https://cdn7.axureshop.com/demo/1763441/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u821.png"
            alt="" />
        </p>
        <div class="register">
          <p class="register_title"><span>挂号信息</span></p>
          <p>
            <span>就诊人</span>
            <span class="content" v-if="list.patientID">{{
              list.patientID.name
            }}</span>
          </p>
          <p>
            <span>就诊科室</span>
            <span class="content">{{ list.department }}</span>
          </p>
          <p>
            <span>就诊日期</span>
            <span class="content">2022-{{ list.date }}</span>
          </p>
          <p>
            <span>就诊时间</span>
            <span class="content">
              <span>{{ order.period }} </span>
              <span> {{ list.time }}</span>
            </span>
          </p>
          <p>
            <span>就诊医生</span>
            <span class="content">
              <span>{{ list.doctor }} </span>
              <span> {{ list.position }}</span>
            </span>
          </p>
          <p>
            <span>就诊地点</span>
            <span class="content">门诊楼一层201</span>
          </p>
          <p>
            <span>就诊序号</span>
            <span class="content">{{ list.number }}</span>
          </p>
        </div>
      </div>
      <div class="payment_information">
        <p class="register_title"><span>支付信息</span></p>
        <p>
          <span>订单号</span>
          <span class="content">520233456</span>
        </p>
        <p>
          <span>支付方式</span>
          <span class="content">微信</span>
        </p>
        <p>
          <span>支付金额</span>
          <span class="content">{{ list.price }}</span>
        </p>
        <p>
          <span>交易时间</span>
          <span class="content">
            <span>2022-{{ list.date }} </span>
            <span> 06：30</span>
          </span>
        </p>
      </div>
      <div class="skip">
        <button @click="btnAction()">返回首页</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      list: {},
    };
  },
  watch: {
    $route() {
      this.registerData();
    },
  },
  computed: {
    ...mapState("doctor", ["order"]),
  },
  methods: {
    btnAction() {
      this.$router.push({ name: "home" });
    },
    async registerData() {
      let id = this.$route.params.id;
      let res = await axios.request({
        method: "get",
        url: "/api/registeredOrder/getinfo",
        params: { _id: id },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      console.log("---支付结果---", res.data.data);
      this.list = res.data.data;
    },
  },
  created() {
    console.log("患者_id=====》", this.$route.params.id);
  },
  mounted() {
    this.registerData();
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

.payment_successful {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .success {
    width: 100%;
    height: vw(188);
    background-color: #fff;
    position: relative;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .img1 {
      width: vw(100);
      height: vw(100);
    }

    .img2 {
      width: vw(59);
      height: vw(38);
    }
  }

  .registration_information {
    height: vw(446);
    width: 100%;
    background-color: #fff;
    margin-top: vw(10);
    position: relative;
    box-sizing: border-box;

    .tu {
      padding-left: vw(65);
      padding-top: vw(30);

      img {
        width: vw(241);
        height: vw(51);
      }
    }

    .register {
      margin-top: vw(40);
      padding-left: vw(15);

      p {
        padding-bottom: vw(20);
        font-family: "ArialMT", "Arial";
        font-weight: 400;
        font-size: vw(14);
        color: #000;
        position: relative;

        .content {
          position: absolute;
          left: vw(169);
        }
      }

      .register_title {
        font-size: vw(16);
      }
    }
  }

  .payment_information {
    background-color: #fff;
    margin-top: vw(10);
    padding-left: vw(15);
    padding-top: vw(20);
    height: vw(229);
    width: 100%;
    box-sizing: border-box;

    p {
      padding-bottom: vw(20);
      font-family: "ArialMT", "Arial";
      font-weight: 400;
      font-size: vw(14);
      color: #000;
      position: relative;

      .content {
        position: absolute;
        left: vw(169);
      }
    }

    .register_title {
      font-size: vw(16);
    }
  }

  .skip {
    margin-top: vw(10);
    margin-bottom: vw(10);
    text-align: center;

    button {
      background-color: #2ec7c9;
      color: #fff;
      width: vw(258);
      height: vw(44);
      border: none;
      border-radius: vw(5);
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(16);
      cursor: pointer;
    }
  }
}
</style>
